<template>
	<Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
		<Row :gutter="24" type="flex">
			<Col v-bind="grid">
			<FormItem label="监控设备：" prop="deviceId">
				<Select v-model="data.deviceId" placeholder="请选择监控设备">
					<Option value="1" key="1">1#温感</Option>
					<Option value="2" key="2">2#湿感</Option>
				</Select>
			</FormItem>
			</Col>
			<Col v-bind="grid">
			<FormItem label="监控信号：" prop="signalId">
				<Select v-model="data.signalId" placeholder="请选择监控信号">
					<Option value="1" key="1">环境温度</Option>
					<Option value="2" key="2">环境湿度</Option>
				</Select>
			</FormItem>
			</Col>
			<Col v-bind="grid">
			<FormItem label="告警等级：" prop="alarmLevel">
				<Select v-model="data.alarmLevel" placeholder="请选择告警等级">
					<Option v-for="key in Object.keys(AlarmLevels)" :value="key" :key="key">{{ AlarmLevels[key] }}
					</Option>
				</Select>
			</FormItem>
			</Col>
			<Col v-bind="grid">
			<FormItem label="告警确认状态：" prop="confirmStatus">
				<Select v-model="data.confirmStatus" placeholder="请选择告警确认状态">
					<Option value="0" key="0">待确认</Option>
					<Option value="1" key="1">已确认</Option>
				</Select>
			</FormItem>
			</Col>
			<Col v-bind="grid" class="ivu-text-left">
			<FormItem>
				<Button type="primary" @click="handleSubmit">查询</Button>
				<Button class="ivu-ml-8" @click="handleReset">重置</Button>
			</FormItem>
			</Col>
		</Row>
	</Form>
</template>
<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			AlarmLevels: {
				1: '紧急',
				2: '严重',
				3: '警告',
				4: '消息',
			},
			grid: {
				xl: 8,
				lg: 8,
				md: 12,
				sm: 24,
				xs: 24
			},
			collapse: false,
			data: {
				deviceId: '',
				signalId: '',
				alarmLevel: '',
				confirmStatus: ''
			},
			rules: {},
		}
	},
	computed: {
		...mapState('admin/layout', [
			'isMobile'
		]),
		labelWidth() {
			return this.isMobile ? undefined : 120;
		},
		labelPosition() {
			return this.isMobile ? 'top' : 'right';
		}
	},
	methods: {
		handleSubmit() {
			this.$emit('on-submit', this.data);
		},
		handleReset() {
			this.$refs.form.resetFields();
			this.$emit('on-reset');
		}
	}
}
</script>
